<template>
  <div class="w-[800px] fixed bottom-0 left-1/2 transform -translate-x-1/2 bg-white py-3 shadow-md border-2 border-blue-500 rounded-t-lg">
    <div class="flex justify-around">
      <button
          :class="{ 'text-blue-500': $route.path === '/home' }"
          @click="router.push('/home')"
          class="flex flex-col items-center bg-transparent border-none px-4"
      >
        <span class="text-sm">首页</span>
      </button>
      <button
          :class="{ 'text-blue-500': $route.path === '/orders' }"
          @click="router.push('/orders')"
          class="flex flex-col items-center bg-transparent border-none px-4"
      >
        <span class="text-sm">订单</span>
      </button>
      <button class="flex flex-col items-center bg-transparent border-none px-4">
        <span class="text-sm">我的</span>
      </button>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    return { router };
  },
};
</script>